<template>
  <div>
    <div  class="videoImage">
      <img style="max-height: 300px;vertical-align: center;" :src="msg[1]+'?w=400'"/>
      <div @click="playOpen">
        <el-icon>
          <VideoCamera/>
        </el-icon>
      </div>
    </div>
    <video-play ref="play" v-model="playVisible"></video-play>
  </div>
</template>

<script setup lang="ts">
import VideoPlay from "@/views/static/component/VideoPlay.vue";
import {ref} from "vue";

const props = defineProps({
      message: {
        type: String,
        default: ''
      }
    }
)
const msg = props.message?.split(',')
const playVisible = ref(false);
const play = ref<any>();

const playOpen = () => {
  play.value.playVideo(msg[0], '视频.mp4')
  playVisible.value = true
}

</script>

<style lang="scss" scoped>
.videoImage {
  position: relative;

  & > div {
    background: rgba(3, 3, 3, 0.4);

    z-index: 10;
    position: absolute;
    width: 70px;
    height: 70px;
    left: calc(50% - 35px);
    top: calc(50% - 35px);
    border-radius: 100px;
    cursor: pointer;

    i.el-icon{
      font-size: 36px;
      position: relative;
      top: 17px;
      left: 20px;
      color: #eeeeee;
    }

    &:hover{
      i.el-icon{
        color: #e70c0c;
      }
    }
  }
}
</style>
